<template>
  <view class="region">
    <view class="navbar">
      <uni-nav-bar @clickLeft="goback" leftIcon="left" fixed="true" border="false" color="#FFF" statusBar="true"
        backgroundColor="#22b9a3" title="请选择服务城市" />
    </view>
    <view class="location">
      <view class="city">
        {{location.locationInfo.name}}
      </view>
      <view class="reload" @click="reloadLocation">
        <uni-icons type="map-pin-ellipse"></uni-icons>
        重新定位
      </view>
    </view>
    <view class="citylist">
      <view class="title">
        选择已开通城市
      </view>
      <view>
        <uni-data-picker @change="fetchCity" placeholder="请选择省份" popup-title="请选择城市" :map="map" :localdata="cityList">
        </uni-data-picker>
      </view>
    </view>
  </view>
</template>

<script setup>
  import * as http from '@/utils/http'
  import {
    uselocation
  } from '../../../stores/location';
  import {
    onMounted,
    ref
  } from 'vue'
  const location = uselocation()
  const cityList = ref([])
  const map = {
    text: 'name',
    value: 'id'
  }
  
  //加载城市信息
  onMounted(async () => {
    const cityResult = await http.getRequest("/peizhen/open-city/getAllCity")
    if (cityResult.code == 0) {
      cityList.value = cityResult.data
    }
  })
  //获取选择的城市
  function fetchCity(e) {
    location.setLocation(e.detail.value[1].value,e.detail.value[1].text)
    //返回到首页
    uni.navigateBack()
  }
  //重新获取定位信息
 async function reloadLocation() {
    await location.getLocationInfo()
    uni.navigateBack()
    
  }

  function goback() {
    uni.navigateBack()
  }
</script>

<style lang="scss" scoped>
  .region {
    .navbar ::v-deep .uni-nav-bar-text {
      font-size: $uni-font-size-title !important;
      font-family: "siyuan";
    }

    .location {
      display: flex;
      justify-content: space-between;
      height: 100rpx;
      background-color: #fff;
      font-size: 30rpx;
      font-weight: 500;
      color: #464646;
      line-height: 100rpx;
      letter-spacing: 2rpx;
      padding-left: 24rpx;
      padding-right: 24rpx;
    }

    .citylist {
      .title {
        background-color: #f5f5f5;
        height: 120rpx;
        line-height: 120rpx;
        padding-left: 24rpx;
        font-size: 36rpx;
        font-weight: bold;
      }
    }
  }

  ::v-deep .uni-data-tree {
    font-size: 35rpx;

    .placeholder {
      color: grey;
      font-size: 25rpx;
    }
  }

  ::v-deep .input-value {
    height: 100rpx;
  }
</style>